<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div>
			<p>你好</p>
			<p>我好</p>
			<p>大家好</p>
		</div>
		<script>
			/**
			 * es6的数字扩展
			 */
			function fun1(){
				//Math.trunc去除小数部分
				console.log('4.1',Math.trunc(4.1));   //4
				console.log('4.9',Math.trunc(4.9));   //4
				//Math.sign方法用来判断一个数到底是正数、负数、还是零。对于非数值，会先将其转换为数值
				console.log('-5',Math.sign(-5))    //-1
				console.log('5',Math.sign(5))      //+1
				console.log('0',Math.sign(0))      //0
				console.log('50',Math.sign(50))    //+1
				console.log('NaN',Math.sign(NaN))  //NaN
			}
			/**
			 * es6数组扩展
			 */
			function fun2(){
				let arr = Array.of(1,2,3,4);
				console.log('arr=',arr);  // arr= [1, 2, 3, 4]
				let emptyArr = Array.of();
			}
//获取标签直接转为数组
			function fun3(){
				let p = document.querySelectorAll('p');
				let pArr = Array.from(p);
				pArr.forEach(function(item){
					console.log(item.textContent);  // 你好 我好 大家好
  				})
			}
//数组的遍历
			function fun4(){
				 for(let index of [1,2,3,4].keys()){
				 	//输出下标
				    console.log('index',index);
				  }
//				  for(let value of [1,2,3,4].values()){
//				  	//输出值
//				    console.log('value',value);
//				  }
				  for(let [index,value] of [1,2,4,5,6].entries()){
				  	//输出小标和对应的值
				    console.log(index,value);
				  }
			}
//数组直接转序列输出
			function fun5(){
				console.log(...[1, 2, 3])
				console.log(1, ...[2, 3, 4], 5)
			}
//箭头函数
			function fun6(){
				var sum = (num1, num2) => { return num1 + num2; }
			}
//::绑定-双冒号左边是一个对象，右边是一个函数。该运算符会自动将左边的对象，作为上下文环境（即this对象），绑定到右边的函数上面
			function fun7(){
				foo::bar;
				// 等同于
				bar.bind(foo);
				
				foo::bar(...arguments);
				// 等同于
				bar.apply(foo, arguments);
				
				const hasOwnProperty = Object.prototype.hasOwnProperty;
				function hasOwn(obj, key) {
				  return obj::hasOwnProperty(key);
				}
			}
//动态key值
			function fun8(){
				let a = 'b';
			    let es5_obj = {
			        a:'c',
			        b:'c'
			    }
			    let es6_obj = {
			        [a]:'c'   // a是动态的变量，可以自由赋值
			    }
			}
//set的数据结构和用法
			function fun9(){
				let list = new Set();
			    list.add(2);
			    list.add(3);
			    console.log(list.size);  //2
			
			    let arr = [1,2,3,4,5];
			    let list2 = new Set(arr);
			    console.log(list2.size); //5
			
			    console.log(list2) //{1, 2, 3, 4, 5}
			
			    let arr2 = [1,2,3,4,2,1];   //这里可以当作数组去重
			    let list3 = new Set(arr2);
			    console.log(list3) //{1, 2, 3, 4}
			    /*add(value)：添加某个值，返回Set结构本身。
				delete(value)：删除某个值，返回一个布尔值，表示删除是否成功。
				has(value)：返回一个布尔值，表示该值是否为Set的成员。
				clear()：清除所有成员，没有返回值。*/
			}
//map的数据结构和用法
			function fun10(){
				const map = new Map([
			      ['name', '张三'],
			      ['title', 'Author']
			    ]);
			
			    map.size // 2
			    map.has('name') // true
			    map.get('name') // "张三"
			    map.has('title') // true
			    map.get('title') // "Author"
			    let map = new Map();
			    let arr = ['123'];
			    map.set(arr,'456');
			    console.log(map,map.get(arr)) // {["123"] => "456"} "456"
			}
//Class的基本用法
			function fun11(){
				class Parent {
					//constructor方法是类的默认方法，通过new命令生成对象实例时，自动调用该方法
				    constructor(name='gao') {
				      this.name = name;
				    } 
				  }
				
				 class child extends Parent {
				
				  }
				  let v_child = new child();
				  console.log(v_child);  //{name: "gao"}
			}
//闭包
			function fun12(){
				//1
				function foo(){
				  var a=20;
				  return function(){
				    return a;
				  }
				}
				foo()();
				//2
				var fn = null;
				function foo() {
				    var a = 2;
				    function innnerFoo() { 
				        console.log(a);
				    }
				    fn = innnerFoo; 
				}
				
				function bar() {
				    fn();
				}
				
				foo();
				bar(); // 2
			}
		</script>
	</body>
</html>
